<template>
  <!-- 导航栏 -->
  <van-nav-bar
    :title="TypeName"
    left-text="返回"
    left-arrow
    fixed
    placeholder
    z-index="1000"
    @click-left="OnBack"
    @click-right="SearchShow = true"
  >
    <template #right>
      <van-icon name="search" size="20" />
    </template>
  </van-nav-bar>

  <!-- 搜索框 -->
  <van-popup v-model:show="SearchShow" position="top">
    <van-search
      v-model="keywords"
      placeholder="请输入关键词"
      @search="OnSearch"
    />
  </van-popup>

  <!-- 下拉菜单 -->
  <van-sticky :offset-top="46">
    <van-dropdown-menu>
      <van-dropdown-item
        @change="OnTypeToggle"
        v-model="TypeActive"
        :options="TypeList"
      />
      <van-dropdown-item
        @change="OnFlagToggle"
        v-model="FlagActive"
        :options="FlagList"
      />
      <van-dropdown-item
        @change="OnSortToggle"
        v-model="SortActive"
        :options="SortList"
      />
      <van-dropdown-item
        @change="OnByToggle"
        v-model="ByActive"
        :options="ByList"
      />
    </van-dropdown-menu>
  </van-sticky>

  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
    <!-- 加载列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      finished-text="没有更多了"
      @load="OnLoad"
    >
      <div class="list">
        <div class="item" v-for="item in list" :key="item.id">
          <router-link
            :to="{ path: '/product/info', query: { proid: item.id } }"
          >
            <div class="thumb">
              <van-image
                width="100%"
                height="150px"
                fit="cover"
                :src="item.thumb_text"
              />
            </div>
            <div class="name">{{ item.name }}</div>
            <div class="box">
              <div class="price">
                <span v-if="item.live_price > 0">￥{{ item.live_price }}</span>
                <span :class="item.live_price ? 'product_price' : ''"
                  >￥{{ item.price }}</span
                >
              </div>
              <div class="buy-count">{{ item.buy_count }}人付款</div>
            </div>
            <div class="box">
              <div class="region">{{ item.region_text }}</div>
              <div class="chat">
                <van-icon name="chat-o" color="#ff5000" size="16" />
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>

  <!-- 返回顶部 -->
  <van-back-top />
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 控制是否显示搜索框
const SearchShow = ref(false);
// 导航栏的标题
const TypeName = ref("全部分类");
// 关键字
const keywords = ref("");

// 下拉菜单的数据
const FlagList = [
  { text: "全部商品", value: "0" },
  { text: "新品", value: "1" },
  { text: "热销", value: "2" },
  { text: "推荐", value: "3" },
];
const SortList = [
  { text: "按上架时间", value: "createtime" },
  { text: "按价格", value: "price" },
  { text: "按库存", value: "stock" },
];
const ByList = [
  { text: "降序", value: "desc" },
  { text: "升序", value: "asc" },
];
// 商品分类数据
const TypeList = reactive([{ text: "全部分类", value: "0" }]);

// 从分类页面传过来的分类id
const TypeActive = ref(proxy.$route.query.typeid ?? "0");
// 1-新品 2-热销 3-推荐
const FlagActive = ref("0");
// 排序 上架时间 价格 库存
const SortActive = ref("createtime");
// desc 降序 asc 升序
const ByActive = ref("desc");
// 下拉刷新状态
const refreshing = ref(false);
// 懒加载状态
const loading = ref(false);
// 上拉加载结束状态
const finished = ref(false);
// 商品数据
const list = ref([]);
// 分页
const page = ref(1);

// 挂载前钩子
onBeforeMount(() => GetTypeData());

// 获取商品分类数据
const GetTypeData = async () => {
  // 发起请求
  let result = await proxy.$http.post({
    url: "/product/type",
  });
  // 处理请求结果
  if (result.code === 1) {
    for (let item of result.data) {
      TypeList.push({
        text: item.name,
        value: item.id.toString(),
      });
      if (item.id == TypeActive.value) {
        TypeName.value = item.name;
      }
    }
  }
};

// 下拉刷新的回调函数
const OnRefresh = () => {
  page.value = 1;
  list.value = [];
  finished.value = false;
  loading.value = true;
  refreshing.value = true;

  setTimeout(OnLoad, 1000);
};

// 上拉加载回调函数
const OnLoad = async () => {
  // 如果是下拉刷新，重置其值
  if (refreshing.value === true) {
    refreshing.value = false;
  }
  // 组装参数
  let params = {
    typeid: TypeActive.value,
    flag: FlagActive.value,
    sort: SortActive.value,
    by: ByActive.value,
    keywords: keywords.value,
    page: page.value,
  };
  // 发起请求
  let result = await proxy.$http.post({
    url: "/product/index",
    params,
  });
  // 取消加载
  loading.value = false;
  // 处理请求结果
  if (result.code === 1) {
    // 获取数据总数
    let count = result.data ? result.data.count : 0;
    // 获取数据并且合并数组
    list.value = result.data ? list.value.concat(result.data.list) : [];
    // 判断是否加载完所有数据
    if (list.value.length >= count) {
      // 完成加载
      finished.value = true;
      return false;
    }
    // 分页+1
    page.value = page.value + 1;
  } else {
    finished.value = true;
  }
};
// 切换分类
const OnTypeToggle = () => {
  TypeList.map((item) => {
    if (item.value == TypeActive.value) {
      TypeName.value = item.text;
    }
  });
  OnRefresh();
};
// 切换热销
const OnFlagToggle = () => {
  OnRefresh();
};
// 切换排序
const OnSortToggle = () => {
  OnRefresh();
};
// 切换排序
const OnByToggle = () => {
  OnRefresh();
};
// 关键字搜索事件
const OnSearch = () => {
  OnRefresh();
};

// 返回上一页
const OnBack = () => proxy.$router.back();
</script>

<style scoped>
@import url("/assets/css/ProductIndex.css");
</style>